<template>
  <div class="header" shadow="never">
    <div class="action">
      <div>
        <el-button type="text" icon="el-icon-menu" @click="handlePreConfigJson">
          生成JSON
        </el-button>
        <el-button type="text" icon="el-icon-menu" @click="handlePrePage">
          预览页面
        </el-button>
        <el-button type="text" icon="el-icon-menu" @click="handleClear">
          清空页面
        </el-button>
      </div>
    </div>

    <el-dialog
      title="生成JSON"
      :visible.sync="dialogVisible"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <json-viewer
          :value="preConfigJson"
          :expanded="true"
          :expand-depth="999"
          :copyable="{ copyText: '复制', copiedText: '已复制' }"
          sort
        ></json-viewer>
      </el-scrollbar>
      <span slot="footer">
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="预览页面"
      :visible.sync="dialogVisiblePre"
      :fullscreen="true"
      width="60%"
      top="10vh"
    >
      <GenerateChart v-if="dialogVisiblePre" :config="preConfigJson" />
    </el-dialog>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import widget from '@/mixins/widget'
import GenerateChart from '@/components/GenerateChart'
import { cloneDeep } from 'lodash'

export default {
  mixins: [widget],
  components: {
    JsonViewer,
    GenerateChart
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisiblePre: false,
      generateChartConfig: {}
    }
  },

  computed: {
    // 配置信息
    preConfigJson() {
      const templateConfig = cloneDeep(this.makingChart).templateConfig
      let preConfigJson = {
        tempInfos: {
          template: templateConfig.tempInfos.template,
          uuid: templateConfig.tempInfos.uuid
        },
        compInfos: []
      }
      preConfigJson.compInfos = templateConfig.compInfos.map(item => {
        let info = {
          genId: item.genId,
          type: item.type,
          attrs: {
            base: {},
            data: {},
            events: {},
            options: {}
          }
        }
        // #TODO 目前只开放了url和openUrl
        if (item.attrs.data.url) {
          info.attrs.data.url = item.attrs.data.url
        }
        if (item.attrs.data.openUrl) {
          info.attrs.data.openUrl = item.attrs.data.openUrl
        }
        return info
      })

      return preConfigJson
    }
  },

  methods: {
    // 生成JSON
    handlePreConfigJson() {
      this.dialogVisible = true
    },
    // 预览页面
    handlePrePage() {
      this.dialogVisiblePre = true
    },
    // 清空页面
    handleClear() {
      this.selectWidget = {}
      if (this.generateType === 'template') {
        this.makingChart.templateConfig = {
          compInfos: {},
          tempInfos: {
            template: '',
            uuid: ''
          }
        }
      }
      if (this.generateType === 'custom') {
        this.makingChart.customConfig = {
          list: [],
          config: {}
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  box-sizing: border-box;
  .action {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #e0e0e0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }
  /deep/.el-scrollbar {
    &__wrap {
      height: 60vh;
      overflow-x: hidden !important;
    }
  }
}
</style>
